<template>
	<view>

		<view v-if="tabsArr.length > 0">


			<view class="item" v-for="(item, index) in tabsArr" :key="index" @click="itemClick(item)">

				<view class="title-wrap">

					<text class="title" style="font-size: 30upx;font-weight: bold;">
						{{"项目名称："+filterNull(item.projectName)}}
					</text>

				</view>


				<view v-if="item.jumpType==2">
					<u-line color="#efefef" dashed margin="0 0 15px"></u-line>
					<view class="text-line">
						<text class="text-name">城市:</text>
						<text class="text-value">{{filterNull(item.city)}}</text>
					</view>


					<view class="text-line">
						<text class="text-name">联系人:</text>
						<text class="text-value">{{filterNull(item.contact)}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">价格:</text>
						<text class="text-value">{{filterNull(item.price)}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">所需车辆数:</text>
						<text class="text-value">{{filterNull(item.vehicleNumber)}}</text>
					</view>



					<view class="text-line">
						<text class="text-name">所需车辆要求:</text>
						<text class="text-value">{{filterNull(item.vehicleRequirements)}}</text>
					</view>


					<view class="text-line">
						<text class="text-name">项目说明:</text>
						<text class="text-value">{{filterNull(item.projectDescription)}}</text>
					</view>
				</view>

				<view v-else class="type-img">
					<image lazy-load='true' class="img" :src="baseImg + item.listImage">
					</image>
					<image class="pointer" src="../../../../static/home/pointer.png"></image>
				</view>

				<view class="title-wrap">

					<view class="title-warn">

					</view>

					<view class="btn-detail" @click.stop="apply(item)">
						在线报名
					</view>
				</view>

			</view>

			<u-loadmore :status="loadingStatus" @loadmore="clickloadmore"></u-loadmore>
		</view>

		<no-data v-else></no-data>

		<u-popup safeAreaInsetTop mode="bottom" :show="showpop" round="10" closeable @close="closePop">

			<view class="pop">

				<text class="pop-title">报名信息</text>

				<view class="pop-input">
					<text>手机号*</text>
					<u-input v-model="phone" type="number" inputAlign="right" placeholder="请输入手机号" border="bottom"
						clearable maxlength="11">
					</u-input>
				</view>
				<view class="pop-input">
					<text>备注</text>
					<u-input v-model="remark" inputAlign="right" placeholder="如有其他问题可选择备注说明" border="bottom" clearable
						type="textarea">
						></u-input>
				</view>

				<button class="pop-btn" @click="commit">提交报名</button>


			</view>

		</u-popup>

	</view>
</template>

<script>
	import {
		supplymanagement,
		cluessourcesignsubmit
	} from '../../../../common/api.js';

	export default {
		data() {
			return {
				pageNo: 1,
				pageSize: 10,
				loadingStatus: 'loading',
				tabsArr: [
				// 	{
				// 	jumpType: 1,
				// 	listImage: 'business_management/a4/5c/920d90b5ad244b8097f23b5dfbeaa45c.png'
				// },
				 ],
				showpop: false,
				phone: '',
				remark: '',
				baseImg: this.baseImageUrl,
				supplyManagementId:''
			}
		},

		onLoad() {
			this.getData()
		},

		methods: {

			getData() {
				supplymanagement({
					params: {
						pageNo: this.pageNo,
						pageSize: this.pageSize
					}
				}).then(res => {
					if (this.pageNo == 1) {
						this.tabsArr = [];
						this.pageNo++;
						// uni.stopPullDownRefresh();

						this.loadingStatus = 'loadmore';
					} else {
						if (!uni.$u.test.isEmpty(res)) {
							this.pageNo++;

							this.loadingStatus = 'loadmore';
						} else {

							this.loadingStatus = 'nomore';
						}
					}

					if (!uni.$u.test.isEmpty(res)) {
						this.tabsArr = this.tabsArr.concat(res);
					}


				})
			},

			clickloadmore() {
				this.getData();
				this.showloading = true;
				this.loadingStatus = 'loading';
			},

			itemClick(item) {
				getApp().globalData.content = item.connectionAddress;
				if (item.jumpType == 1) {
				  uni.navigateTo({
					  url:'../../activityIntroduction/activityIntroduction?type=' + item.jumpType,
				  })
				}
			},

			apply(item) {
				this.supplyManagementId = item.supplyManagementId;
				uni.$u.sleep().then(() => {
					this.showpop = !this.showpop
				})
			},

			closePop() {
				this.showpop = false
			},
			
			commit(){
				console.log(this.phone);
				
				if(!uni.$u.test.mobile(this.phone)){
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号',
					})
					return false;
				}
				
				
				
				cluessourcesignsubmit({
					phone: this.phone,
					supplyManagementId: this.supplyManagementId,
					remark: this.remark
				}).then(res=>{
					uni.showToast({
						icon: 'none',
						title: '提交成功',
					})
					this.showpop = false;
					this.pageNo = 1;
					this.getData();
				})
			}

		},
		onPullDownRefresh() {
			this.pageNo = 1;
			this.getData();
		},

		onReachBottom() {
			console.log('到底了');

			this.getData();
			this.showloading = true;
			this.loadingStatus = 'loading';
		}

	}
</script>

<style lang="scss" scoped>
	.title-wrap {
		display: inline-flex;
		justify-content: space-between;
	}

	.title {
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		font-size: 28upx;
		color: $black33;
	}

	.title-warn {
		color: #E93131;
		background-color: #FFFFFF;
		white-space: nowrap;
		text-align: center;
		font-size: 26upx;
		line-height: 60upx;
		margin: 10upx 0upx;
		align-self: flex-end;
	}

	.pop {
		@include flex(column);
		padding: 26upx;

		.pop-title {
			font-size: 34upx;
			color: $black33;
			font-weight: bold;
		}

		.pop-input {
			@include flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30upx;
			color: $black33;
			margin-top: 25upx;
		}

		.pop-btn {
			width: 100%;
			height: 96upx;
			line-height: 96upx;
			border-radius: 14upx;
			background-color: $green12;
			text-align: center;
			color: $white;
			margin-top: 50upx;
			font-size: 32upx;
			font-weight: bold;
			letter-spacing: 5upx;
		}
	}

	.type-img {
		position: relative;
	}

	.img {
		display: inline-block;
		width: 100%;
		height: 240upx;
	}

	.pointer {
		position: absolute;
		bottom: 15upx;
		right: 15upx;
		width: 40upx;
		height: 40upx;
		display: inline-block;
	}
</style>
